<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>详细测试页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" href="../static/img/logo.png" th:href="@{/img/logo.png}" type="image/x-icon"/>

</head>

<body>

<div class="container col-md-6 col-md-offset-3" style="margin-top: 5%">
    <br>
    <div style="border: 1px solid #c6c5c5;border-radius: 10px;text-align: center">
        <div style="font-size: xx-large;margin-top: 10px"><b id="title" th:if="${selfchecking}!=null"
                                                             th:text="${selfchecking.getTitle()}">抑郁症测试题SDS</b>
            <span class="label label-info" style="font-size: xx-small;vertical-align:top;">免费</span>
        </div>
        <!--        1-->
        <div id="mybody1" style="">
            <div>
                <img th:src="@{${selfchecking.getImg()}}" style="width: 80%">
            </div>
            <div style="background-color: #e8e6e6;border-radius: 5px;width: 90%;margin: 10px auto auto auto">
                <p id="description" style="padding: 10px 10px 10px 10px;text-align: left;"
                   th:if="${selfchecking}!=null" th:text="${selfchecking.getDescription()}">
                    抑郁症测试题属于国际标准版SDS，具有普遍的代表性，在线工具网为每道测试题搭配了充满正能量的温馨图片，愿所有抑郁症患者都能走向阳光。本测试仅仅是参考，不能作为诊断依据。 更严谨、更权威的测试量
                </p>
            </div>
            <button type="button" class="btn btn-warning" style="width:50%;margin: auto auto 10px auto"
                    onclick="starttest()">开始测试
            </button>
            <div style="margin: auto auto 10px auto;color: #958780">
                一共有 <b th:if="${selfchecking}!=null" th:text="${selfchecking.getCount()}">12</b> 道
            </div>
        </div>
        <!--        2-->
        <div id="mybody2" style="width: 90%;margin: 10px auto auto auto;display: none">
            <div class="progress">
                <div class="progress-bar" id="myprogress" style="width: 0%;">
                </div>
            </div>
            <div style="text-align: left;">
                <div id="mytitle" style="font-weight: bold">
                    1、当你要外出一整天，你会：
                </div>
                <div class="radio">
                    <label id="myoption">
                        <input type="radio" name="radio" onchange="testing(1)">计划要做什么和什么时候做<br>
                        <input type="radio" name="radio" onchange="testing(2)">说去就去<br>
                    </label>
                </div>
            </div>
            <button type="button" class="btn btn-info" style="width:50%;margin: 20px auto 10px auto;opacity: 0.5"
                    onclick="rstarttest()">重新测试
            </button>
        </div>

        <!--        3-->
        <div id="mybody3" style="display: none">
            <div style="margin-top: 20px">
                <img th:src="@{/img/bg.jpg}" alt="图片加载失败了" class="img-circle" style="width: 50%">
            </div>
            <div>
                <div style="text-align: left;background-color: #e7e6e6;margin: 20px auto 20px auto;width: 85%;padding: 10px 10px 10px 10px;border-radius: 10px">
                    <div style="color: #2e6da4;">
                        <b th:text="${selfchecking.getTitle()}" style="font-size: xx-large">焦虑症</b>
                        <span>结果分析</span>
                    </div>
                    <div>
                        <div th:if="${user}==null">
                            你的测试指数为：<b id="selfchecking_score1" style="color: #711535">20</b>
                        </div>
                        <div th:if="${user}!=null">
                            <b th:text="${user.name}">jjz </b>, 你的测试指数为：<b id="selfchecking_score2"
                                                                      style="color: #711535">20</b>
                        </div>
                    </div>
                    <div>
                        <p id="selfchecking_result">
                            你存在轻微的焦虑情绪，如果对你的生活造成影响，还请咨询专业医生。本测试结果只作为参考，不能作为诊断的结果。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


</body>
<script th:inline="javascript">
    try {
        var score = 0;
        var rank = 0;
        var selfcheckings = [[${selfchecking}]];
        var total = selfcheckings.count;
        var id = selfcheckings.id;
    } catch (err) {
        alert("error")
    }
</script>
<script th:src="@{/js/selfchecking_detail.js}"></script>
</html>
